<template>
    <el-container>
        <el-header>
            <div class="title" style="z-index:0">
              		{{this.userInfo.FName}}
            </div>
            <el-menu
              :default-active="activeIndex2"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              background-color="#ff9031"
              text-color="#fff"
              :router="true"
              active-text-color="#f3f900">
                <el-menu-item  index="/admin">Admin</el-menu-item>
              <!-- <el-menu-item  index="/sales">Sales</el-menu-item> -->
               
               <el-submenu index="1">
					<template slot="title">Sales</template>
					<el-menu-item index="/sales"> Active Sales Order List</el-menu-item>
					<!--<el-menu-item index="/sales/addNewSales">add New Sales</el-menu-item> -->
			   </el-submenu>
               
              	<!-- <el-menu-item  index="/customer">Customer</el-menu-item> -->
                
                <el-submenu index="2">
					<template slot="title">Customer</template>
					<el-menu-item index="/customer">Customer List</el-menu-item>
					<!--<el-menu-item index="/sales/addNewSales">add New Sales</el-menu-item> -->
			   </el-submenu>
			   
                 <el-submenu index="">
				    <template slot="title">Purchasing</template>
				    <el-menu-item index="/purchase">Active RFQ List</el-menu-item>
				    <el-menu-item index="/purchaseOrder">Active Purchase Order List</el-menu-item>
				    <el-menu-item index="/purchaseRequest">Purchase Request List</el-menu-item> 
				  </el-submenu>
                
                <!--<el-menu-item  index="/purchase">Purchasing</el-menu-item> -->
               <el-menu-item  index="/vendor">Vendor</el-menu-item>
               <el-menu-item  index="/part">Part</el-menu-item>
               
            </el-menu>
            <div class="logout" style="z-index:0">
                <p>Welcome，{{userInfo.employeeName}}<a style="cursor:pointer;" @click="logout">logOut</a></p>
            </div>
        </el-header>
        <el-container>
            <router-view :user="userInfo" class="main_con"></router-view>
        </el-container>
    </el-container>
</template>

<script>
    export default {
       
        data(){
            return {
                activeIndex: '1',
                activeIndex2: '1',
                auth:{alc:{}},
                userInfo:{},
                tt:[],
            }
        },
        created(){
			var user = this.getCookie('user_info');
			if(user){
				this.userInfo = JSON.parse(user);
			}
		},
        mounted() {
          this.getCookie('user_info');
        },
        methods:{
            logout(){
	      		this.delCookie();
	      		window.location.href = "/login";
	      	},
	      	getCookie(name){
				var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
				if(arr=document.cookie.match(reg)){
					return unescape(arr[2]);
				}else{
					return null;
				}
			},
			delCookie(){
				var name = 'wms_auth';
				var exp = new Date();
				exp.setTime(exp.getTime() - 1);
				var cval=this.getCookie(name);
				if(cval!=null)
				document.cookie= name + "="+cval+";expires="+exp.toGMTString();
			},
			
			 handleSelect(key, keyPath) {
                //console.log(key, keyPath);
            },
            handleOpen(key, keyPath) {
               // console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                //console.log(key, keyPath);
            },
	      	
            
            

        }
    }
</script>

<style type="text/css" lang="scss">
	*{
		font-family: 'Microsoft YaHei';
	}
    .el-header{
        padding: 0px;
        background-color: #ff9031;
        .title{
          position: fixed;
          z-index: 100;
          width: 188px;
          height: 61px;
          text-align: center;
          line-height: 61px;
          color: #ffffff;
          font-size:16px;
        }
        .el-menu--horizontal{
          width: 80%;
          border-right: none;
          border-bottom: solid 1px #e6e6e6;
          margin-left: 188px;
        }
        .logout{
         // width: 260px;
          position: fixed;
          z-index: 100;
          right: 1px;
          top: 0px;
          p{
            color: #ffffff;
            line-height: 61px;
            a{
              padding-left:25px;
              color: #ffffff;
            }
          }
        }
    }

    .main_con{
      width: 100%;
      .el-aside{
        width: 15%;
        border-right: solid 1px #e6e6e6;
        list-style: none;
        position: relative;
        margin: 0;
        padding-left: 0;
      }
      .el-main{
        padding: 15px 20px 15px 15px;
        width: 84%;
        height: 100%;
        float: left;

      }
      .el-menu-item{padding: 0px 15px;}
        
    }
	// 通用common
	.el-select{
		//下拉
		.el-input{
			.el-input__inner{
				height: 32px;
				line-height: 32px;
			}
			.el-input__icon{line-height: 32px;}
		}
	}
	//btn
	.el-button{
		padding: 8px 20px;
	}
	.el-button--mini, .el-button--mini.is-round{
		padding: 6px 12px;
	}
	//头部查询条件
	.conditions{
		flex-wrap:wrap;
		display: flex;
		padding: 5px 0px 0;
		justify-content: flex-start;
		.conItem{
			margin-left: 20px;
			margin-bottom: 8px;
			min-width: 20%;
			    height: 32px;
		}
	}
	// 面包屑导航
	.con{
		.el-breadcrumb{
			height: 19px;
		}
	}
	//输入框
	.el-input{
		.el-input__inner{
			height: 32px;
			line-height: 32px;
		}
	}
	// 日期
	.el-date-editor{
		.el-input__inner{
			height: 32px;
			
		}
		.el-input__icon{
			line-height: 32px;
		}
	}
	// 复选框 单选框
	.radio label, .checkbox label{
		padding-left: 0;
	}
	// 表格操作栏按钮
	.tableTopTool{
		margin-bottom: 5px;
		.el-button--text{
			padding: 6px 3px;
		}
	}
</style>